<template>
  <div class="addEdit-block">
    <el-form
        class="detail-form-content"
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="80px"
        :style="{backgroundColor:addEditForm.addEditBoxColor}"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item class="input" v-if="type!='info'"  label="竞赛名称" prop="jingsaimingcheng">
            <el-input v-model="ruleForm.jingsaimingcheng"
                      placeholder="竞赛名称" clearable  :readonly="ro.jingsaimingcheng"></el-input>
          </el-form-item>
          <div v-else>
            <el-form-item class="input" label="竞赛名称" prop="jingsaimingcheng">
              <el-input v-model="ruleForm.jingsaimingcheng"
                        placeholder="竞赛名称" readonly></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <el-form-item class="select" v-if="type!='info'"  label="竞赛类型" prop="jingsaileixing">
            <el-select v-model="ruleForm.jingsaileixing" placeholder="请选择竞赛类型">
              <el-option
                  v-for="(item,index) in jingsaileixingOptions"
                  v-bind:key="index"
                  :label="item"
                  :value="item">
              </el-option>
            </el-select>
          </el-form-item>
          <div v-else>
            <el-form-item class="input" label="竞赛类型" prop="jingsaileixing">
              <el-input v-model="ruleForm.jingsaileixing"
                        placeholder="竞赛类型" readonly></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <el-form-item class="date" v-if="type!='info'" label="竞赛时间" prop="jingsaishijian">
            <el-date-picker
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                v-model="ruleForm.jingsaishijian"
                type="date"
                placeholder="竞赛时间">
            </el-date-picker>
          </el-form-item>
          <div v-else>
            <el-form-item class="input" v-if="ruleForm.jingsaishijian" label="竞赛时间" prop="jingsaishijian">
              <el-input v-model="ruleForm.jingsaishijian"
                        placeholder="竞赛时间" readonly></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <el-form-item class="select" v-if="type!='info'"  label="级别" prop="jibie">
            <el-select v-model="ruleForm.jibie" placeholder="请选择级别">
              <el-option
                  v-for="(item,index) in jibieOptions"
                  v-bind:key="index"
                  :label="item"
                  :value="item">
              </el-option>
            </el-select>
          </el-form-item>
          <div v-else>
            <el-form-item class="input" label="级别" prop="jibie">
              <el-input v-model="ruleForm.jibie"
                        placeholder="级别" readonly></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <el-form-item class="input" v-if="type!='info'"  label="举办单位" prop="jubandanwei">
            <el-input v-model="ruleForm.jubandanwei"
                      placeholder="举办单位" clearable  :readonly="ro.jubandanwei"></el-input>
          </el-form-item>
          <div v-else>
            <el-form-item class="input" label="举办单位" prop="jubandanwei">
              <el-input v-model="ruleForm.jubandanwei"
                        placeholder="举办单位" readonly></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <el-form-item class="input" v-if="type!='info'"  label="承办单位" prop="chengbandanwei">
            <el-input v-model="ruleForm.chengbandanwei"
                      placeholder="承办单位" clearable  :readonly="ro.chengbandanwei"></el-input>
          </el-form-item>
          <div v-else>
            <el-form-item class="input" label="承办单位" prop="chengbandanwei">
              <el-input v-model="ruleForm.chengbandanwei"
                        placeholder="承办单位" readonly></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="24">
          <el-form-item class="upload" v-if="type!='info' && !ro.tupian" label="图片" prop="tupian">
            <file-upload
                tip="点击上传图片"
                action="file/upload"
                :limit="3"
                :multiple="true"
                :fileUrls="ruleForm.tupian?ruleForm.tupian:''"
                @change="tupianUploadChange"
            ></file-upload>
          </el-form-item>
          <div v-else>
            <el-form-item v-if="ruleForm.tupian" label="图片" prop="tupian">
              <img style="margin-right:20px;" v-bind:key="index" v-for="(item,index) in ruleForm.tupian.split(',')" :src="item" width="100" height="100">
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item class="textarea" v-if="type!='info'" label="竞赛目的" prop="jingsaimude">
            <el-input
                style="min-width: 200px; max-width: 600px;"
                type="textarea"
                :rows="8"
                placeholder="竞赛目的"
                v-model="ruleForm.jingsaimude" >
            </el-input>
          </el-form-item>
          <div v-else>
            <el-form-item v-if="ruleForm.jingsaimude" label="竞赛目的" prop="jingsaimude">
              <span>{{ruleForm.jingsaimude}}</span>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item class="textarea" v-if="type!='info'" label="竞赛内容" prop="jingsaineirong">
            <el-input
                style="min-width: 200px; max-width: 600px;"
                type="textarea"
                :rows="8"
                placeholder="竞赛内容"
                v-model="ruleForm.jingsaineirong" >
            </el-input>
          </el-form-item>
          <div v-else>
            <el-form-item v-if="ruleForm.jingsaineirong" label="竞赛内容" prop="jingsaineirong">
              <span>{{ruleForm.jingsaineirong}}</span>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item class="textarea" v-if="type!='info'" label="地点" prop="didian">
            <el-input
                style="min-width: 200px; max-width: 600px;"
                type="textarea"
                :rows="8"
                placeholder="地点"
                v-model="ruleForm.didian" >
            </el-input>
          </el-form-item>
          <div v-else>
            <el-form-item v-if="ruleForm.didian" label="地点" prop="didian">
              <span>{{ruleForm.didian}}</span>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-form-item class="btn">
        <el-button v-if="type!='info'" type="primary" class="btn-success" @click="onSubmit">提交</el-button>
        <el-button v-if="type!='info'" class="btn-close" @click="back()">取消</el-button>
        <el-button v-if="type=='info'" class="btn-close" @click="back()">返回</el-button>
      </el-form-item>
    </el-form>


  </div>
</template>
